<template>
  <div ref="chartRef" style="width: 100%; height: 100%;"></div>
</template>

<script setup lang="ts">
import {ref, onMounted, onBeforeUnmount} from 'vue'; // 导入 Vue 的 ref 和 onMounted 钩子
import * as echarts from 'echarts'; // 导入 ECharts 库
import leadCountyGeoJSON from '../../assets/json/611000/qianshan.json'; // 导入 GeoJSON 文件路径
import mapBg from '../../assets/img/bg/map-bg.jpeg'; // 导入本地图片路径

const chartRef = ref(null); // 创建一个 ref 对象来引用图表容器

let mapChart: echarts.ECharts | null = null;  // ECharts 实例

// 定义一个异步函数来渲染地图
const renderMapChart = async () => {
  if (chartRef.value) {
    // 注册地图数据
    echarts.registerMap('lead_county', {geoJSON: leadCountyGeoJSON});

    // 初始化 ECharts 实例
    mapChart = echarts.init(chartRef.value);

    // 配置 ECharts 选项
    const option = {
      title: {
        text: '铅山县地图',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}'
      },
      visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'],
        calculable: true,
        inRange: {
          color: ['#00FF00', '#FF0000'] // 设置颜色从绿色到红色
        }
      },
      geo: {
        map: 'lead_county',
        roam: true, // 允许地图缩放和平移
        label: {
          show: true
        },
        emphasis: {
          label: {
            show: true
          }
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1,
          areaColor: '#033c2d' // 地图区域的颜色
        },
        background: {
          image: mapBg // 使用本地导入的图片路径作为背景
        }
      },
      series: [
        {
          name: '铅山县',
          type: 'map',
          map: 'lead_county',
          roam: true, // 允许地图缩放和平移
          label: {
            show: true
          },
          emphasis: {
            label: {
              show: true
            }
          }
        }
      ]
    };

    // 设置 ECharts 选项
    mapChart.setOption(option);
  }
}

// 在组件挂载后执行
onMounted(() => {
  // 延迟初始化图表，以确保 DOM 元素已经渲染完成
  setTimeout(() => {
    renderMapChart();
  }, 200);
});

onBeforeUnmount(
    () => {
      // 在组件销毁前执行
      // 清理图表实例
      if (mapChart) {
        mapChart.dispose();
        mapChart = null;
      }
    }
)

</script>

<style scoped>
/* 确保图表容器有高度 */
div {
  width: 100%;
  height: 100%;
}
</style>
